<template>
    <div id="Statistical_Into">
        <el-card class="box-card">
            <el-form ref="form" :model="form" label-width="80px" :inline="true" size="small">
                <el-form-item label="">
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="开始日期" v-model="form.time1"
                                            value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="1">-</el-col>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" placeholder="结束日期" v-model="form.time2"
                                            value-format="yyyy-MM-dd" style="width: 100%;"
                                            @change="changeClick"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="created_at"
                        label="款项日期">
                </el-table-column>
                <el-table-column
                        prop="money"
                        label="提款金额">
                </el-table-column>
                <el-table-column
                        prop="bankname"
                        label="收款人">
                </el-table-column>
                <el-table-column
                        prop="bank"
                        label="银行名称">
                </el-table-column>
                <el-table-column
                        prop="bankno"
                        label="银行卡号">
                </el-table-column>
                <el-table-column
                        prop="female"
                        label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status==0">待处理</span>
                        <span v-if="scope.row.status==1">同意</span>
                        <span v-if="scope.row.status==2">拒绝</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="el-pagination">
                <el-pagination
                        background
                        @size-change="changeSize"
                        @current-change="changeCurrent"
                        :current-page="params.pagenum"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="params.pagesize"
                        :layout="this.$store.state.paginationLayout"
                        :total="params.totals">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Statistical_Into",
        data() {
            return {
                params: {
                    pagenum: 1,
                    pagesize: 10,
                    totals: 0,
                },
                form: {
                    time1: '',
                    time2: '',
                },
                tableData: [],
            }
        },
        created() {
            this.getList()
        },
        methods: {
            changeClick(e) {
                console.log(e)
                if (e < this.form.time1) {
                    this.$message.error('结束日期不能小于开始日期');
                    this.form.time2 = '';
                }
            },
            getList() {
                let data = {
                    page: this.params.pagenum,
                    page_size: this.params.pagesize,
                    status: 1,
                    start_time: this.form.time1,
                    end_time: this.form.time2
                };
                this.$axios.post("mch/withdraw/index", data).then((res) => {
                    this.params.totals = res.data.count;
                    this.tableData = res.data.list;
                });
            },
            // 每页显示多少条
            changeSize(val) {
                this.params.pagesize = val;
                this.getList();
            },
            // 当前显示的页数
            changeCurrent(val) {
                this.params.pagenum = val;
                this.getList();
            },
            search() {
                this.params.pagenum = 1;
                this.getList();
            }

        }
    }
</script>

<style scoped>
    .order-head {
        height: 160px;
        background: #f5f5f5;
        margin-top: 20px;
        border-radius: 10px;
        padding: 20px;
        box-sizing: border-box;
        font-size: 14px;
        color: #f2f2f2;
    }

    .order-head .head-top h5 {
        font-weight: 700;
    }

    .order-head .head-top p {
        color: #ffffff;
        font-size: 32px;
        padding: 10px 0;
    }

    .order-head .head-bottom {
        display: flex;
    }

    .order-head .head-bottom .head-bottom-item {
        flex: 1;
    }

    .order-head .head-bottom .head-bottom-item h5 {
        font-weight: 700;
        line-height: 25px;
    }

    .order-head .head-bottom .head-bottom-item p {
        line-height: 25px;
    }

    .order-head .head-bottom .head-bottom-item span {
        line-height: 25px;
        /*color: #8a6d3b;*/
        font-weight: 700;
        color: #dff0d8;
    }

    .order-head .head-bottom .head-bottom-item .sex {
        font-weight: 500;
        /*color: #777777;*/
    }

</style>